/*
 * @Author: HuangYue
 * @Date: 2022-02-28 15:32:54
 * @LastEditors: HuangYue
 * @LastEditTime: 2022-02-28 18:55:01
 * @FilePath: /graduation/src/pages/user/Account/AccountSetting/index.jsx
 * @Description:个人设置
 */
import React from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Input, Upload, message } from 'antd';
import ProForm, {
  ProFormDependency,
  ProFormFieldSet,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import { PageContainer } from '@ant-design/pro-layout';
import { useModel } from 'umi';
// import { queryCurrent } from '../service';
import { queryProvince, queryCity } from '@/services/mockApi/geographic.js';
import styles from './BaseView.less';

const validatorPhone = (rule, value, callback) => {
  if (!value[0]) {
    callback('Please input your area code!');
  }

  if (!value[1]) {
    callback('Please input your phone number!');
  }

  callback();
}; // 头像组件 方便以后独立，增加裁剪之类的功能

const AvatarView = ({ avatar }) => (
  <>
    <div className={styles.avatar_title}>头像</div>
    <div className={styles.avatar}>
      <img src={avatar} alt="avatar" />
    </div>
    <Upload showUploadList={false}>
      <div className={styles.button_view}>
        <Button>
          <UploadOutlined />
          更换头像
        </Button>
      </div>
    </Upload>
  </>
);

const AccountSetting = () => {
  // const { data: currentUser, loading } = useRequest(() => {
  //   return queryCurrent();
  // });
  const { initialState, serInitialState } = useModel('@@initialState');
  console.log(initialState);
  //获取当前用户信息
  const { currentUser } = initialState;
  //获取用户头像信息
  const getAvatarURL = () => {
    if (currentUser) {
      if (currentUser.avatar) {
        return currentUser.avatar;
      }

      const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
      return url;
    }
    return '';
  };
  //更新用户信息
  const handleFinish = async () => {
    message.success('更新基本信息成功');
  };

  return (
    <PageContainer
      header={{
        breadcrumb: {},
      }}
    >
      <ProCard layout="center">
        <div className={styles.baseView}>
          <>
            <div className={styles.left}>
              <ProForm
                layout="vertical"
                onFinish={handleFinish}
                submitter={{
                  resetButtonProps: {
                    style: {
                      display: 'none',
                    },
                  },
                  submitButtonProps: {
                    children: '更新基本信息',
                  },
                }}
                initialValues={{ ...currentUser, phone: currentUser?.phone.split('-') }}
                hideRequiredMark
              >
                <ProFormText
                  width="md"
                  name="email"
                  label="邮箱"
                  rules={[
                    {
                      required: true,
                      message: '请输入您的邮箱!',
                    },
                  ]}
                />
                <ProFormText
                  width="md"
                  name="name"
                  label="昵称"
                  rules={[
                    {
                      required: true,
                      message: '请输入您的昵称!',
                    },
                  ]}
                />
                <ProFormTextArea
                  name="profile"
                  label="个人简介"
                  rules={[
                    {
                      required: true,
                      message: '请输入个人简介!',
                    },
                  ]}
                  placeholder="个人简介"
                />
                <ProFormSelect
                  width="sm"
                  name="country"
                  label="国家/地区"
                  rules={[
                    {
                      required: true,
                      message: '请输入您的国家或地区!',
                    },
                  ]}
                  options={[
                    {
                      label: '中国',
                      value: 'China',
                    },
                  ]}
                />

                <ProForm.Group title="所在省市" size={8}>
                  <ProFormSelect
                    rules={[
                      {
                        required: true,
                        message: '请输入您的所在省!',
                      },
                    ]}
                    width="sm"
                    fieldProps={{
                      labelInValue: true,
                    }}
                    name="province"
                    className={styles.item}
                    request={async () => {
                      return queryProvince().then(({ data }) => {
                        return data.map((item) => {
                          return {
                            label: item.name,
                            value: item.id,
                          };
                        });
                      });
                    }}
                  />
                  <ProFormDependency name={['province']}>
                    {({ province }) => {
                      return (
                        <ProFormSelect
                          params={{
                            key: province?.value,
                          }}
                          name="city"
                          width="sm"
                          rules={[
                            {
                              required: true,
                              message: '请输入您的所在城市!',
                            },
                          ]}
                          disabled={!province}
                          className={styles.item}
                          request={async () => {
                            if (!province?.key) {
                              return [];
                            }

                            return queryCity(province.key || '').then(({ data }) => {
                              return data.map((item) => {
                                return {
                                  label: item.name,
                                  value: item.id,
                                };
                              });
                            });
                          }}
                        />
                      );
                    }}
                  </ProFormDependency>
                </ProForm.Group>
                <ProFormText
                  width="md"
                  name="address"
                  label="街道地址"
                  rules={[
                    {
                      required: true,
                      message: '请输入您的街道地址!',
                    },
                  ]}
                />
                <ProFormFieldSet
                  name="phone"
                  label="联系电话"
                  rules={[
                    {
                      required: true,
                      message: '请输入您的联系电话!',
                    },
                    {
                      validator: validatorPhone,
                    },
                  ]}
                >
                  <Input className={styles.area_code} />
                  <Input className={styles.phone_number} />
                </ProFormFieldSet>
              </ProForm>
            </div>
            <div className={styles.right}>
              <AvatarView avatar={getAvatarURL()} />
            </div>
          </>
        </div>
      </ProCard>
    </PageContainer>
  );
};

export default AccountSetting;
